import React, { Component } from 'react'
import { connect } from 'react-redux'
import { actionCreators } from '../store'
import { link } from 'react-router-dom'
import {
    ListWrapper,
    ListItem,
    ListItemContent,
    ListItemTitle,
    LoadMore
} from '../style.js'
class List extends Component {
    render () {
        return (
            <div>
                <ListWrapper>
                    {
                        this.props.articleList.map((item, index) => {
                            return (
                                <ListItem key={index}>
                                    <link to="/detail">
                                        <ListItemTitle>{item.get('title')}</ListItemTitle>
                                    </link>
                                    <ListItemContent>
                                        {item.get('desc')}
                                    </ListItemContent>
                                    <img className="ListItemImg" src={item.get('imgUrl')} alt="" />
                                </ListItem>
                            )
                        })
                    }
                </ListWrapper>
                <LoadMore onClick={() => this.props.getMoreList(this.props.page)}>阅读更多</LoadMore>
            </div>
        )
    }
}
const mapStateToProps = (state) => {
    return {
        articleList: state.getIn(['home','articleList']),
        page: state.getIn(['home','page'])
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        getMoreList (page) {
            dispatch(actionCreators.getMoreList(page))
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(List)